import { observer } from 'mobx-react-lite'
import { useState } from 'react'
import { useRootStore } from '../store'
import '../styles/appleBasket.scss'
import Apple from './apple'

const Basket = () => {
  const { appleStore } = useRootStore()
  console.log(appleStore, 'applestore')
  const { appleList, pick, eatenNum, eatenWeight } = appleStore
  const [isPicking, setPicking] = useState(false)

  const pickApple = async () => {
    if (isPicking) return
    setPicking(true)
    await pick()
    setPicking(false)
  }
  const getCurrWeight = list => {
    let totalWeight = 0
    list.forEach(item => {
      totalWeight += item.weight
    })
    console.log(totalWeight, 'total')
    return totalWeight
  }
  

  return (
    <div className="appleBusket">
        <div className="title">苹果篮子</div>

        <div className="stats">
            <div className="section">
                <div className="head">当前</div>
                <div className="content">{ appleList.length }个苹果，{ getCurrWeight(appleList) }克
                </div>
            </div>
            <div className="section">
                <div className="head">已吃掉</div>
                <div className="content">{ eatenNum }个苹果，{ eatenWeight }克</div>
            </div>
        </div>

        <div className="appleList">
          { 
            appleList.length ?
              appleList.map(item => {
                return (
                  <Apple key={item.id} id={item.id} weight={item.weight}></Apple>
                )
              }) : <div className="empty-tip" key="empty">苹果篮子空空如也</div>
          }
        </div>

        <div className="btn-div">
          <button className={isPicking ? 'disabled' : ''} onClick={() => { pickApple() }}>摘苹果</button>
            {/* <button  className={isPicking ? 'disabled' : ''}  onClick={() => pickApple() } >{buttonText}</button> */}
        </div>
    </div>
  )
}

export default observer(Basket)